@gray: #333;
@color: #4482ff;
@color2: #49b0ff;
@color3: #7680ff;

@baseWidth: 720;
.px2rem(@atr,@px,@base-width:0) when( @base-width > 0){
	@{atr}: unit(@px*10/@base-width , rem);
}

.px2rem(@atr,@px,@base-width:0) when( @base-width = 0){
	@{atr}: unit(@px*10/@baseWidth , rem);
}

.Basic{
    .items{
        display: flex;
        border: 1px solid @color;
        color: @color;
        .px2rem(margin-bottom, 30);
        .px2rem(padding, 12);
        .px2rem(padding-top, 15);
        .px2rem(padding-bottom, 15);
        .px2rem(border-left-width, 6);
        text-align: center;
        &.isColorful{
            text-align: left;
        }
        &.isColorful:nth-child(3n-1){
            color: #49b0ff;
            border-color: #49b0ff;
        }
        &.isColorful:nth-child(3n){
            color: #7680ff;
            border-color: #7680ff;
        }
        &.col-12{
            width: 47%;
            flex: 0 0 auto;
            float: left;
            &:nth-child(2n){
                float: right;
            }
        }
        .icon{
            .px2rem(padding-right, 8);
            .px2rem(font-size, 62);
            .px2rem(height, 62);
        }
        .inner{
            flex: 1;
            .num{
                font-weight: normal;
                .px2rem(font-size, 28);
                .px2rem(line-height, 36);
            }
            .text{
                .px2rem(font-size, 18);
                color: #333;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                display: block;
            }
        }
    }
}